<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#msg-mod{
				width: 500px;
				margin: 50px auto 0;
			}
			#m-box{
				width: 100%;
				background: rgb(244,244,244);
				border: 1px solid rgb(200,200,200);
				border-radius: 5px;
			}
			.line{
				margin-top: 30px;
			}
			/*clear:both    清除浮动*/
			.clear:after{
				content:'';
				display: block;
				clear: both;
			}
			.line .fl{
				float: left;
			}
			.line .fr{
				float: right;
			}
			.font{
				width: 80px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			#name{
				height: 30px;
				width: 390px;
				margin-right: 25px;
				/*outline:none ;*/
				border-radius: 2px;
				border: 1px solid #ccc;
			}
			#mes{
				height: 150px;
				width: 390px;
				margin-right: 25px;
				border-radius: 5px;
				border: 1px solid #ccc;
				resize: none;
			}
			#sub{
				width: 60px;
				height: 30px;
				background: #ccc;
				border: 1px solid #ccc;
				margin: 0 25px 10px 0;
			}
			h2{
				margin-top: 20px;			
			}
			h3{
				width: 500px;
				height: 30px;
				line-height: 30px;
				background: gray;
				display: inline-block;
				text-align: left;
				border-radius: 5px 5px 0 0;
			}
			ul{
				text-align: center;
			}
			li{
				/*margin-top: 20px;*/
				overflow: hidden;
			}
			a{
				text-decoration: none;
				float: right;
				color: blue;
			}
			p{
				display: inline-block;
				width: 498px;
				height: 60px;
				line-height: 60px;
				border-radius: 0 0 5px 5px;
				text-align: left;
				border: 1px solid gray;
			}
			
			ul{
				list-style: none;
			}
		</style>
		<script src="js/tween.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div id="msg-mod">
			<div id="m-box">
				<div class="line clear">
					<span class="fl font">姓名：</span>
					<input type="" name="" id="name" value="" class="fr"/>
				</div>
				<div class="line clear">
					<span class="fl font">内容：</span>
					<textarea name="" rows="" cols="" class="fr" id="mes"></textarea>
				</div>
				<div class="line clear">
					<input type="button" name="" id="sub" value="提交" class="fr"/>
				</div>
			</div>
			<h2>显示留言</h2>
			<div id="m-count">
				<ul id = "list">
				</ul>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		function messag(){
			var sub = document.getElementById("sub");
			var name = document.getElementById("name");
			var mes = document.getElementById("mes");
			var list = document.getElementById("list");
			sub.onclick = function(){
				//把姓名和内容显示到内容
				//判断是否为空，不能提交
				if(name.value == "" || name.value == null || name.value == undefined ){
					alert("错了，还没写呢，点什么啊！！!");
				}else{
					//创建li标签
					var li = document.createElement("li");
					li.innerHTML = "<h3>" + name.value + "</h3>" + "<p>" + mes.value + "<a href = '#' id = 'shanchu'>删除" + "</a>" + "</p>" +"<br/>"; 
					//把li标签拼接到ul之内
					list.insertBefore(li,list.firstElementChild);
					//调用动画函数
					guodudonghua(0,li.offsetHeight,li);
					var aaa = li.getElementsByTagName("a")[0];
					lia(aaa,li);
				}
			}
			//过渡动画函数
			function guodudonghua(start,end,obj){
				var t = 0;
				var b = start;
				var c = end - start;
				var d = 20;
				var timer = setInterval(function(){
					t++;
					if(t >= d){
						clearInterval(timer);
						timer = null;	
						if(b > 0){
							list.removeChild(obj);
						}
					}
					obj.style.height = Tween.Elastic.easeOut(t,b,c,d) + "px";
					//跟上面那个if（b > 0）那个效果一样
//					if(obj.offsetHeight == 0){
//						list.removeChild(obj);
//					}
				},30)
			}
			//给每个li标签里面的a标签去绑定事件
			function lia(objA,objLi){
				objA.onclick = function(){
					//删除objLi
//					list.removeChild(objLi);
					guodudonghua(objLi.offsetHeight,0,objLi);
				}
			}
		}
		messag();
	</script>
</html>
